<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>票链智联项目</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: #2d3748;
        }
        .glassmorphism {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .chart-container {
            height: 280px;
            width: 100%;
            position: relative;
        }
        .highlight-text {
            position: relative;
            display: inline-block;
        }
        .highlight-text::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background-color: rgba(59, 130, 246, 0.2);
            z-index: -1;
        }
        .tab-active {
            border-bottom: 3px solid #3b82f6;
            color: #3b82f6;
            font-weight: 600;
        }
        .detail-layer {
            position: fixed;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background: white;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            overflow-y: auto;
        }
        .detail-layer.active {
            transform: translateX(0);
        }
        @media (max-width: 768px) {
            .detail-layer {
                width: 80%;
            }
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 导航切换 -->
    <div class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4">
            <div class="flex space-x-8">
                <button id="insuranceTab" class="py-4 px-2 tab-active">保司端</button>
                <button id="repairTab" class="py-4 px-2 text-gray-600 hover:text-blue-500">修理厂端</button>
            </div>
        </div>
    </div>

    <!-- 保司端内容 -->
    <div id="insuranceContent" class="container mx-auto px-4 py-6">
        <!-- 顶部检索区 -->
        <div class="glassmorphism p-6 mb-6">
            <h2 class="text-xl font-semibold mb-4 text-blue-600">案件检索</h2>
            <div class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-sm font-medium text-gray-700 mb-1">案件号</label>
                    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="输入案件号">
                </div>
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-sm font-medium text-gray-700 mb-1">修理厂名称</label>
                    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="输入修理厂名称">
                </div>
                <div class="self-end">
                    <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <i class="fas fa-search mr-2"></i>搜索
                    </button>
                </div>
            </div>
        </div>

        <!-- 中部状态监控列表 -->
        <div class="glassmorphism p-6 mb-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold text-blue-600">状态监控列表</h2>
                <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                    <i class="fas fa-exclamation-triangle mr-2"></i>异常处理
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">案件号</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">修理厂</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">推送时间</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前状态</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CL202405001</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">北京朝阳修理厂</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥3,850.00</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-05-10 09:30</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已开票</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CL202405002</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">上海浦东修理厂</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥5,200.00</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-05-10 10:15</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">待开票</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CL202405003</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">广州天河修理厂</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥2,300.00</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-05-10 11:45</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">失败</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 底部数据统计看板 -->
        <div class="glassmorphism p-6">
            <h2 class="text-xl font-semibold mb-4 text-blue-600">数据统计看板</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="card-hover">
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h3 class="text-lg font-medium text-gray-700 mb-2">开票状态分布</h3>
                        <div class="chart-container">
                            <canvas id="pieChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="card-hover">
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h3 class="text-lg font-medium text-gray-700 mb-2">近7天趋势</h3>
                        <div class="chart-container">
                            <canvas id="lineChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修理厂端内容 -->
    <div id="repairContent" class="container mx-auto px-4 py-6 hidden">
        <div class="glassmorphism p-6">
            <h2 class="text-xl font-semibold mb-6 text-blue-600">审批管理</h2>
            <div class="flex flex-col md:flex-row gap-6">
                <!-- 左侧待审批列表 -->
                <div class="flex-1">
                    <div class="bg-white p-4 rounded-lg shadow">
                        <h3 class="text-lg font-medium text-gray-700 mb-4">待审批列表</h3>
                        <div class="space-y-4">
                            <div class="border border-gray-200 rounded-lg p-4 hover:bg-blue-50 transition-colors">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <p class="font-medium">案件号: CL202405004</p>
                                        <p class="text-sm text-gray-500 mt-1">保司名称: 平安保险</p>
                                        <p class="text-sm text-gray-500">金额: ¥4,250.00</p>
                                        <p class="text-sm text-gray-500">推送时间: 2024-05-11 08:45</p>
                                    </div>
                                    <button class="detail-btn px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors text-sm" data-id="1">
                                        详情
                                    </button>
                                </div>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4 hover:bg-blue-50 transition-colors">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <p class="font-medium">案件号: CL202405005</p>
                                        <p class="text-sm text-gray-500 mt-1">保司名称: 人保财险</p>
                                        <p class="text-sm text-gray-500">金额: ¥3,780.00</p>
                                        <p class="text-sm text-gray-500">推送时间: 2024-05-11 10:20</p>
                                    </div>
                                    <button class="detail-btn px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors text-sm" data-id="2">
                                        详情
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧详情浮层 -->
                <div id="detailLayer" class="detail-layer">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl font-semibold text-gray-800">案件详情</h3>
                            <button id="closeDetail" class="text-gray-500 hover:text-gray-700">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="mb-6">
                            <h4 class="text-lg font-medium text-gray-700 mb-3">案件明细</h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">维修工时</td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">¥1,200.00</td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">前保险杠更换</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">配件费用</td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">¥2,050.00</td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">原厂配件</td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">喷漆费用</td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">¥800.00</td>
                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">金属漆</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h4 class="text-lg font-medium text-gray-700 mb-3">审批意见</h4>
                            <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" rows="3" placeholder="请输入审批意见..."></textarea>
                        </div>
                        
                        <div class="flex justify-end space-x-4">
                            <button class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                                驳回
                            </button>
                            <button class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                通过
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 切换保司端和修理厂端
        document.getElementById('insuranceTab').addEventListener('click', function() {
            document.getElementById('insuranceContent').classList.remove('hidden');
            document.getElementById('repairContent').classList.add('hidden');
            this.classList.add('tab-active');
            document.getElementById('repairTab').classList.remove('tab-active');
        });

        document.getElementById('repairTab').addEventListener('click', function() {
            document.getElementById('insuranceContent').classList.add('hidden');
            document.getElementById('repairContent').classList.remove('hidden');
            this.classList.add('tab-active');
            document.getElementById('insuranceTab').classList.remove('tab-active');
        });

        // 详情弹窗控制
        document.querySelectorAll('.detail-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.getElementById('detailLayer').classList.add('active');
            });
        });

        document.getElementById('closeDetail').addEventListener('click', function() {
            document.getElementById('detailLayer').classList.remove('active');
        });

        // 图表初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 饼图
            const pieCtx = document.getElementById('pieChart').getContext('2d');
            new Chart(pieCtx, {
                type: 'pie',
                data: {
                    labels: ['待开票', '已开票', '失败'],
                    datasets: [{
                        data: [15, 32, 3],
                        backgroundColor: [
                            'rgba(255, 206, 86, 0.7)',
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(255, 99, 132, 0.7)'
                        ],
                        borderColor: [
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(255, 99, 132, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });

            // 折线图
            const lineCtx = document.getElementById('lineChart').getContext('2d');
            new Chart(lineCtx, {
                type: 'line',
                data: {
                    labels: ['5/4', '5/5', '5/6', '5/7', '5/8', '5/9', '5/10'],
                    datasets: [
                        {
                            label: '待开票',
                            data: [12, 14, 10, 13, 15, 14, 15],
                            borderColor: 'rgba(255, 206, 86, 1)',
                            backgroundColor: 'rgba(255, 206, 86, 0.2)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '已开票',
                            data: [25, 28, 30, 27, 29, 31, 32],
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '失败',
                            data: [2, 3, 1, 4, 2, 3, 3],
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            tension: 0.3,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>